import React, { useState } from 'react'
import "./style.css"
import { DownOutlined, UpOutlined } from '@ant-design/icons';
const Index: React.FC = ({ optiona }) => {
  //  console.log(option);
  const [active, setActive] = useState<number>(0)

  const [Search, setSearch] = useState<boolean>(false)
  const [wrapState, setWrapState] = useState<React.CSSProperties | undefined>({
    flexWrap: "nowrap"
  })
  const handOpen = () => {
    if (!Search) {
      setWrapState({ flexWrap: "wrap" })
      setSearch(true)
    } else {
      setWrapState({ flexWrap: "nowrap" })
      setSearch(false)
    }
  }

  return (
    <div className='aaa'>
      {
        <h3>{optiona.title}</h3>
      }
      <ul style={wrapState}>
        {
          optiona.values.map((item, index) => {
            return (
              <li key={index} onClick={() => { setActive(index) }} className={active == index ? 'on' : ''}>
                {item}
              </li>
            )
          })
        }
      </ul>
      {
        optiona.values.length > 12 && (
          <button className='handBtn' onClick={handOpen}>{Search ? "" : ""}{Search ? <DownOutlined /> : <UpOutlined />}</button>
        )
      }
    </div>
  )
}

export default Index
